<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>

    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: rgba(255, 255, 255, 0.99);
        }

        header {
            background: #35424a;
            color: #ffffff;
            padding: 20px 0;
            text-align: center;
        }

        .container {
            width: 80%;
            margin: 20px auto;
            overflow: hidden;
        }

        .blog-post {
            background: #ffffff;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        .blog-post:hover {
            transform: translateY(-5px);
        }

        .btn,
        .edit-btn,
        .delete-btn,
        .look-btn {
            background: #35424a;
            color: #ffffff;
            padding: 12px 20px;
            text-decoration: none;
            border-radius: 8px;
            margin: 10px 5px;
            display: inline-block;
            transition: background 0.3s ease-in-out;
        }

        .btn:hover {
            background: #add8e6;
        }

        .edit-btn {
            background: #00bfff;
        }

        .edit-btn:hover {
            background: #0086b3;
        }

        .look-btn {
            background: #56921a;
        }

        .look-btn:hover {
            background: #00b31e;
        }

        .delete-btn {
            background: #ff4d4d;
        }

        .delete-btn:hover {
            background: #cc0000;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            text-align: left;
        }

        th,
        td {
            padding: 15px;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tbody tr:hover {
            background-color: #f5f5f5;
        }
    </style>

</head>

<body>
<div class="container">
    <h1>用户信息</h1>
    <div>
        <p>用户名: <span th:text="${session.user.name}"></span></p>
        <p>年龄: <span th:text="${session.user.age}"></span></p>
        <p>性别: <span th:text="${session.user.gender}"></span></p>
        <p>创建时间: <span th:text="${session.user.createtime}"></span></p>
    </div>

    <div>
        <a class="btn" href="/login/publish">发布文章</a>
        <!-- 添加返回按钮 -->
        <a class="btn" href="/login/goToBlog">返回</a>

        <a th:href="@{/editUser(id=${session.user.id})}" class="edit-btn">修改</a>

    </div>

    <!-- 文章列表开始 -->
    <h2>文章列表</h2>
    <table>
        <thead>
        <tr>
            <th>标题</th>
            <!--<th>内容</th>-->
            <th>评论数</th>
            <th>点赞数</th>
            <th>发布日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历 articles 列表，展示每篇文章的信息 -->
        <th:block th:each="article : ${articles}">
            <tr>
                <td><span th:text="${article.title}"></span></td>
                <!-- 假设这里需要从后端获取评论数和点赞数，目前先留空占位 -->
                <td><span th:text="${article.comments}"></span></td>
                <td><span th:text="${article.likes}"></span></td>
                <td><span th:text="${article.updatetime}"></span></td>
                <td>
                    <a class="look-btn" th:href="@{/articles/{articleId}(articleId=${article.id})}">查看</a>

                    <a th:href="@{/editArticle(id=${article.id})}" class="edit-btn">修改</a>

                    <form action="/delete" method="post">
                        <input type="hidden" name="id" th:value="${article.id}" />
                        <button type="submit" class="delete-btn" >删除</button>
                    </form>
                </td>
            </tr>
        </th:block>
        </tbody>
    </table>
    <!-- 文章列表结束 -->

    <div class="footer">
        <p>&copy; 2024 用户管理系统 - 所有权利保留</p>
    </div>

</div>
</body>

</html>